---
id: 614202874ca576084fca625f
title: Schritt 16
challengeType: 0
dashedName: step-16
---

# --description--

Jede `region`-Rolle benötigt eine Beschriftung, die Screenreader-Benutzern hilft, den Zweck der Region zu verstehen. Eine Methode zum Hinzufügen einer Beschriftung ist das Hinzufügen eines Überschriftenelements innerhalb der Region und das anschließende Verweisen auf dieses Element mit dem `aria-labelledby`-Attribut.

Füge den `section`-Elementen die folgenden `aria-labelledby`-Attribute hinzu:

- `student-info`
- `html-questions`
- `css-questions`

Verschachtele anschließend – innerhalb eines jeden `section`-Elements – ein `h2`-Element mit einer `id`, die mit dem entsprechenden `aria-labelledby`-Attribut übereinstimmt. Gib jedem `h2` einen passenden Textinhalt.

# --hints--

Du solltest dem ersten `section`-Element ein `aria-labelledby`-Attribut von `student-info` geben.

```js
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
```

Du solltest dem zweiten `section`-Element ein `aria-labelledby`-Attribut von `html-questions` geben.

```js
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
```

Du solltest dem dritten `section`-Element ein `aria-labelledby`-Attribut von `css-questions` geben.

```js
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
```

Du solltest ein `h2`-Element innerhalb des ersten `section`-Elements einfügen.

```js
assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
```

Du solltest ein `h2`-Element innerhalb des zweiten `section`-Elements einfügen.

```js
assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
```

Du solltest ein `h2`-Element innerhalb des dritten `section`-Elements einfügen.

```js
assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
```

Du solltest dem ersten `h2`-Element ein `id`-Attribut von `student-info` geben.

```js
assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
```

Du solltest dem zweiten `h2`-Element ein `id`-Attribut von `html-questions` geben.

```js
assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
```

Du solltest dem dritten `h2`-Element ein `id`-Attribut von `css-questions` geben.

```js
assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
```

Du solltest dem ersten `h2`-Element einen passenden Textinhalt geben. _Tipp: Ich hätte `Student Info` gewählt_

```js
assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
```

Du solltest dem zweiten `h2`-Element einen passenden Textinhalt geben. _Tipp: Ich hätte `HTML` gewählt_

```js
assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
```

Du solltest dem dritten `h2`-Element einen passenden Textinhalt geben. _Tipp: Ich hätte `CSS` gewählt_

```js
assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
        </ul>
      </nav>
    </header>
    <main>
--fcc-editable-region--
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region"></section>
        <section role="region"></section>
        <section role="region"></section>
      </form>
--fcc-editable-region--
    </main>
  </body>
</html>

```

```css
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
}
```
